<template>
  <div style="width: 100%">
    <div id="xieLouChart" style="width: 100%; height: 5.5rem"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null,
    };
  },
  mixins: [echartMixins],
  mounted() {
    setTimeout(() => {
      this.changData();
    }, 200);
    // this.draw()
  },
  methods: {
    async changData() {
      var _this = this;
      let result = await _this.$http.get(
        "api/bi/selectBIWYJC.do?beforeDays=10"
      );
      if (result && result.status === 200) {
        let names = [],
          times = [],
          series = [];


        Object.keys(result.data.names).forEach((item, index) => {
          // if(index>=0&&index<3){
          names.push(result.data.names[item]);
          let nums = [];
          result.data.values[item].forEach((it) => {
            if (times.indexOf(it.epoch) < 0) {
              times.push(it.epoch);
            }
            nums.push(Number(it.relativeDiff).toFixed(2));
          });
          series.push({
            name: result.data.names[item],
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 0,
            data: nums,
          });
          // }
        });
        times.sort();
        this.draw(names, times, series);
        // let i=3;
        // setInterval(()=>{
        // 	names=[]
        // 	times=[]
        // 	series=[]
        // Object.keys(result.data.names).forEach((item,index)=>{
        // 		if(index>=i&&index<i+3){
        // 			names.push(result.data.names[item])
        // 			let nums=[]
        // 			result.data.values[item].forEach(it=>{
        // 				if(index==i){
        // 					times.push(it.epoch)
        // 				}
        // 				nums.push(Number(it.relativeDiff).toFixed(2))
        // 			})
        // 			series.push(  {
        // 				name:result.data.names[item],
        // 				type: "line",
        // 				smooth: true,
        // 				showAllSymbol: true,
        // 				symbol: "emptyCircle",
        // 				symbolSize: 8,
        // 				yAxisIndex: 0,
        // 				data:nums
        // 			})
        // 		}
        // 	})
        // 	this.draw(names,times,series)
        // 	i+=3
        // 	if(i>=result.data.names.length){
        // 		i=0
        // 	}
        // },60000)
      }
    },
    draw(names, times, series) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("xieLouChart"));
      //  ----------------------------------------------------------------
      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: false,
              backgroundColor: "#7B7DDC",
            },
          },
        },
        legend: {
          data: names,
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0%",
        },
        grid: {
          x: "7%",
          width: "90%",
          y: "10%",
        },
        xAxis: {
          data: times,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: ["#1c1a33"],
                width: 2,
                type: "solid",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value} mm ",
            },
          },
        ],
        series,
      };
      this.chart.setOption(option);
    },
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>

<style lang="scss" scoped></style>
